<!--
* @Description: 统计数值
* @Version: 1.0.0
-->
<template>
  <div class="oneseve-statistic">
    <div class="oneseve-statistic-title">
      {{ title }}
      <el-tooltip v-if="tips" effect="light">
        <template #content>
          <div style="width: 200px; line-height: 2">
            {{ tips }}
          </div>
        </template>
        <el-icon class="oneseve-statistic-tips"><el-icon-question-filled /></el-icon>
      </el-tooltip>
    </div>
    <div class="oneseve-statistic-content">
      <span v-if="prefix" class="oneseve-statistic-content-prefix">{{ prefix }}</span>
      <span class="oneseve-statistic-content-value">{{ cmtValue }}</span>
      <span v-if="suffix" class="oneseve-statistic-content-suffix">{{ suffix }}</span>
    </div>
    <div v-if="description || $slots.default" class="oneseve-statistic-description">
      <slot>
        {{ description }}
      </slot>
    </div>
  </div>
</template>

<script setup>
// 声明 props
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: "",
  },
  value: {
    type: String,
    required: true,
    default: "",
  },
  prefix: {
    type: String,
    default: "",
  },
  suffix: {
    type: String,
    default: "",
  },
  description: {
    type: String,
    default: "",
  },
  tips: {
    type: String,
    default: "",
  },
  groupSeparator: {
    type: Boolean,
    default: false,
  },
});

const groupSeparator = (num) => {
  const numStr = typeof num === "number" ? num.toString() : num;
  const [integerPart, decimalPart = ""] = numStr.split(".");
  const formattedIntegerPart = integerPart.replace(/(\d)(?=(\d{3})+$)/g, "$&,").replace(/,$/, "");
  return decimalPart ? `${formattedIntegerPart}.${decimalPart}` : formattedIntegerPart;
};

// 计算属性
const cmtValue = computed(() => {
  return props.groupSeparator ? groupSeparator(props.value) : props.value;
});
</script>

<style scoped>
.oneseve-statistic-title {
  font-size: 13px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.oneseve-statistic-tips {
  margin-left: 5px;
}

.oneseve-statistic-content {
  font-size: 20px;
}

.oneseve-statistic-content-value {
  font-weight: bold;
}

.oneseve-statistic-content-prefix {
  margin-right: 5px;
}

.oneseve-statistic-content-suffix {
  margin-left: 5px;
  font-size: 13px;
}

.oneseve-statistic-description {
  margin-top: 10px;
  color: #999;
}

.dark .oneseve-statistic-content {
  color: #fff;
}
</style>
